﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <link href="scripts/layui/css/layui.css" rel="stylesheet" />
    <style type="text/css">
        body {
            padding: 0 100px 100px;
        }
    </style>
    <script src="scripts/jquery-1.10.2.min.js"></script>
    <script src="scripts/layui/layui.js"></script>
</head>
<body>
    <blockquote class="layui-elem-quote">
        TreeGrid(树形表格)
    </blockquote>
    <div class="demo-text">
        <p>
            依赖模块：layui.grid<br />
            语法：layui.treegrid.createNew(option);
        </p>
    </div>
    <table class="layui-table">
        <thead>
            <tr>
                <th>属性名称</th>
                <th>值类型</th>
                <th>默认值</th>
                <th>说明</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>id</td>
                <td>string</td>
                <td>'id'</td>
                <td>节点id字段</td>
            </tr>
            <tr>
                <td>parentid</td>
                <td>string</td>
                <td>'parentid'</td>
                <td>父节点id字段</td>
            </tr>
            <tr>
                <td>root</td>
                <td>string/number</td>
                <td>0</td>
                <td>根节点值</td>
            </tr>
            <tr>
                <td>order</td>
                <td>string</td>
                <td>=id</td>
                <td>排序字段，默认为id字段</td>
            </tr>
            <tr>
                <td>asc</td>
                <td>string</td>
                <td>'asc'</td>
                <td>排序方式，顺序排序“asc”，倒序排序“desc”</td>
            </tr>
        </tbody>
    </table>

    <blockquote class="layui-elem-quote">
        实例
    </blockquote>
    <script id="view1" type="text/html">
        <table class="layui-table">
            <thead>
                <tr>
                    <td>菜单名称</td>
                    <th>图标</th>
                    <th>视图</th>
                </tr>
            </thead>
            <tbody>
                {{# layui.each(d.rows,function(index,item){ }}
                <tr>
                    <td><input type="checkbox" />{{item.title}}</td>
                    <td>{{item.icon}}</td>
                    <td>{{item.view}}</td>
                </tr>
                {{# }); }}
            </tbody>
        </table>
    </script>

    <fieldset class="layui-elem-field layui-field-title">
        <legend>简单的treegrid</legend>
    </fieldset>
    <div id="demo1" style="width:600px;"></div>


    <fieldset class="layui-elem-field layui-field-title">
        <legend>数据操作</legend>
    </fieldset>
    <div>treegrid继承自grid,数据操作与grid基本一致,请勿使用分页</div>
    <div>
        <a class="layui-btn" id="btn_add">添加</a>
        <a class="layui-btn" id="btn_update">修改</a>
        <a class="layui-btn" id="btn_del">删除</a>
        <a class="layui-btn" id="btn_reset">刷新</a>
    </div>
    <div style="position:relative;height:200px; width:600px;">
        <div id="demo4" class="grid"></div>
    </div>
    <script>
        layui.config({
            base: 'scripts/extend/'
        }).use(['laytpl', 'treegrid'], function () {
            var laytpl = layui.laytpl;
            var treegrid = layui.treegrid;

            treegrid.config.render = function (viewid, data) {
                var view = document.getElementById(viewid).innerHTML;
                return laytpl(view).render(data) || '';
            }

            var data = {
                rows: [{
                    rowid: 7,
                    parentid: 0,
                    path: 7,
                    title: "设置",
                    view: "setup",
                    icon: "&#xe61b;"
                }, {
                    rowid: 8,
                    parentid: 7,
                    path: "7,8,",
                    title: "基础设置",
                    view: "",
                    icon: "&#xe601;"
                }, {
                    rowid: 9,
                    parentid: 8,
                    path: "7,8,9,",
                    title: "菜单",
                    view: "menu",
                    icon: "&#xe600;"
                }, {
                    rowid: 16,
                    parentid: 8,
                    path: "7,8,16,",
                    title: "角色",
                    view: "roles",
                    icon: "&#xe649;"
                }, {
                    rowid: 17,
                    parentid: 8,
                    path: "7,8,17,",
                    title: "用户",
                    view: "user",
                    icon: "&#xe646;"
                }, {
                    rowid: 18,
                    parentid: 17,
                    path: "7,8,17,18",
                    title: "用户1",
                    view: "user1",
                    icon: "&#xe646;"
                }]
            };

            treegrid.createNew({
                elem: 'demo1',
                view: 'view1',
                data: data,
                id: 'rowid',
                parentid: 'parentid',
                root: 0
            }).build();

            var grid4 = treegrid.createNew({
                elem: 'demo4',
                view: 'view1',
                data: data,
                id:'rowid',
                singleSelect: true
            });
            grid4.build();

            //添加
            var id = 200;
            $('#btn_add').on('click', function () {
                var row = grid4.selectRow();
                var parentid = row == null ? 0 : row.rowid;
                id++;
                var row = {
                    rowid: id,
                    parentid: parentid,
                    title: 'menu' + id,
                    icon: id,
                    view: 'add'
                };
                grid4.insert(row);
                //grid4.build();
            });

            //修改
            var time = 1;
            $('#btn_update').on('click', function () {
                var row = grid4.selectRow();
                if (row != null) {
                    row.view = 'update' + time;
                    time++;
                }
                grid4.update(row);
            });

            //删除
            $('#btn_del').on('click', function () {
                grid4.delete();
            });

            //刷新
            $('#btn_reset').on('click', function () {
                grid4.build();
            });

        });
    </script>
</body>
</html>
